<template>
    <header>
      <div class="navbar-fixed">
   <nav>
    <div class="nav-wrapper ">
      <a href="/" class="brand-logo">海米</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>

          <ul class="right hide-on-med-and-down">
      <li><router-link :to="{name: 'login'}" v-if='!user'>登录</router-link></li>
      <!-- Dropdown Trigger -->
      <li v-show='user'>
        <a class="dropdown-button"  data-activates="dropdown1">
        <img class="avatar" src="http://127.0.0.1:8000/ico/zhangli.ico">
    {{user.NickName}}
    <i class="material-icons right">arrow_drop_down</i>
    </a>
    </li>
    </ul>
 <ul id="dropdown1" class="dropdown-content">
  <!--<li><router-link :to="{name: 'userinfo', params :{userid:{{user.Name}}}}">我的拼单</router-link></li>
  <li><a href="#!">我的信息</a></li>-->
   <li><a href="#!">我的订单</a></li>
  <li class="divider"></li>
  <li><a href="#!">退出</a></li>
</ul>
      <ul class="side-nav" id="mobile-demo">
        <li><router-link :to="{name: 'idle'}">闲置</router-link></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><router-link :to="{name: 'login'}" v-if='! user'>登录</router-link></li>
      </ul>
    </div>
  </nav>
      </div>
    </header>
</template>
<style scoped>
    .avatar {
        /*float: left;*/
        margin: 0 8px 0 0px;
        height: 32px;
        width: 32px;
        border-radius: 50%
    }
</style>
<script>
    $(document).ready(function() {
        $(".button-collapse").sideNav();
        $(".dropdown-button").dropdown();
    })
    import {
        mapGetters,
        mapActions
    } from 'vuex'

    export default {
        data() {
                return {
                    user: {
                        Name: 'xxx'
                    }
                }

            },
            computed: mapGetters({
                user: 'currentUser'
            })
    }
</script>